<template>
  <el-dialog append-to-body class="common_dialog" custom-class="reset-dialog-width" :visible.sync="visible" title='存放状态' :close-on-click-modal="false" :close-on-press-escape="false">
    <div v-for="item,index  in  cabinetList" :key="index">
      <div class="text_title">{{item[0].cabinetNorms == 0 ? '小柜' : item[0].cabinetNorms == 1 ? '中柜' : '大柜'}}的抽屉</div>
      <el-row :gutter="20">
        <el-col :span="2" class="el_col_mar_b" v-for="itemin,indexin in item" :key="indexin">
          <el-button class="cabinetBtn" size="medium" :type="itemin.status == 0 ? '' : 'success'" @click="openCabinet(itemin.id)">{{itemin.drawer+1}}</el-button>
        </el-col>
      </el-row>
    </div>
    <template slot="footer">
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import {getDrawerAll,openDrawer} from "@/api/smartCabinet/smartCabinet";
export default {
  data() {
    return {
      visible: false,
      cabinetList:[], //柜子列表以及列表的状态 status-0 空 1 有 
      seriesNo:'', //柜子编码
    }
  },
  props: {

  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.getCabinetList(this.seriesNo)
      });
    },
    // 获取存放柜子的列表
    getCabinetList(seriesNo){
      getDrawerAll(seriesNo).then((res)=>{
        this.cabinetList =res.data
      })
    },
    // 打开对应的智能柜
    openCabinet(drawerId){
      openDrawer(drawerId).then((res)=>{
        this.$modal.msgSuccess("开柜成功");
      })
    }
    
  }
}
</script>
<style lang="scss" scoped>
.text_title{
  font-size: 16px;
    margin-bottom: 10px;
}
.el_col_mar_b{
  margin-bottom: 10px;
}
.cabinetBtn{
  width: 70px;
}
</style>
